<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    :root {
      --themeColor: #56c6f5;
    }

    body {
      background-color: #fff;
    }

    h1 {
      text-align: center;
    }

    .underLine {
      background-color: var(--themeColor);
      height: 5px;
      margin-bottom: 10px;
    }

    .examType {
      background-color: var(--themeColor);
      color: #fff;
      border-collapse: collapse;
    }

    .addExamList {
      border-collapse: collapse;
    }

    .add-exam tr td {
      word-wrap: break-word;
      max-width: 15vw;
      /* height: 4vh; */
    }

    .examType tr td,
    .addExamList tr td {

      width: 15vw;
      height: 4vh;
      border: 1px black solid;
      text-align: center;
    }

    .examType tr td button {
      margin-right: 5px;
    }

    .add td input[type='number'] {
      width: 50px;
      outline: none;
    }

    .yc {
      max-height: 45vh;
      overflow-y: auto;
    }
  </style>

</head>

<body>
  <h1>考试管理</h1>
  <div class="underLine"></div>
  <div class="yc">
    <table class="examType">
      <thead class="top-sample">
        <tr>
          <td>考试ID</td>
          <td>用户</td>
          <td>单选题</td>
          <td>多选题</td>
          <td>填空题</td>
          <td>简答题</td>
          <td>限时（分钟）</td>
          <td>操作</td>
        </tr>
        <tr>
          <td>示例</td>
          <td>示例</td>
          <td>示例</td>
          <td>示例</td>
          <td>示例</td>
          <td>示例</td>
          <td>
            <span>状态：开启</span>
            <br>
            <span>限时：60</span>
          </td>
          <td>
            <button class="qh" data-id="">切换状态</button><button class="del" data-id="">删除</button>
          </td>
        </tr>
      </thead>
      <tbody class="add-exam">

      </tbody>
    </table>
  </div>
  <h3>创建：</h3>
  <div class="underLine"></div>

  <table class="addExamList">
    <tr class="add">
      <td>
        <span>当前题库数量：</span>
        <br>
        <span class="add-danXT">单选题：</span>
        <span class="add-duoXT">多选题：</span>
        <br>
        <span class="add-tkT">填空题：</span>
        <span class="add-jdT">简答题：</span>
      </td>
      <td>
        <span>用户</span>
        <br>
        <select name="" id="user" multiple="multiple" style="width: 100px; outline: none;" id="userList">
        </select>
      </td>
      <td>
        <span>选题量：</span>
        <input type="number" min="0" max='' class="number1" value="0">
      </td>
      <td>
        <span>选题量：</span>
        <input type="number" min="0" max='' class="number2" value="0">
      </td>
      <td>
        <span>选题量：</span>
        <input type="number" min="0" max='' class="number3" value="0">
      </td>
      <td>
        <span>选题量：</span>
        <input type="number" min="0" max='' class="number4" value="0">
      </td>
      <td>
        <input type="range" value="60" min="10" max="180" step="10">
        <br>
        <span class="examTime">时间:</span>
      </td>
      <td>
        <button class="createExam">创建考试</button>
      </td>
    </tr>
  </table>
</body>
<script>
  // 改变主题
  function colorSx() {
    let colors = localStorage.getItem('color')
    document.documentElement.style.setProperty('--themeColor', colors)
  }
  colorSx()
</script>
<script src="../js/examManager.js"></script>


</html>